<template>
  <div>
    <a-extract-style>
      <a-config-provider :theme="myTheme">
        <NuxtLayout :name="layoutName">

          <NuxtPage> </NuxtPage>
        </NuxtLayout>
      </a-config-provider>
    </a-extract-style>
  </div>

</template>

<script setup>
import { computed, nextTick, ref } from 'vue'
import * as AntIconsVue from '@ant-design/icons-vue'
import { theme } from 'ant-design-vue'
// import 'ant-design-vue/dist/antd.css'

import { useStore } from '@/store'

const { themeStore } = useStore()

// 注册图标
const nuxtApp = useNuxtApp()
for (const [key, component] of Object.entries(AntIconsVue)) {
  nuxtApp.vueApp.component(key, component)
}






const myTheme = computed(() => {
  return {
    token: {
      colorPrimary: '#d7000e',
      fontFamily: 'PingFang SC, Helvetica Neue, Arial, sans-serif'
    },
    algorithm: themeStore.isDark
      ? theme.darkAlgorithm
      : theme.defaultAlgorithm
  }
})



// 初始化主题
onMounted(() => {
  updateHtmlClass(themeStore.isDark)
})

// 监听主题变化
watch(
  () => themeStore.isDark,
  (newVal) => {
    nextTick(() => {
      updateHtmlClass(newVal)
    })
  },
  { immediate: true } // 立即执行一次以初始化
)


function updateHtmlClass(isDark) {
  document.documentElement.classList.toggle('dark', isDark)
  document.documentElement.classList.toggle('light', !isDark)
}




</script>

<style>
* {
  margin: 0;
  padding: 0;
}



/* loding加载状态 */
.loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999
}


/* .page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
} */

html.light {
  --color-bg: #fff;
  --color-bg-F6: #F6F8F8;
  --color-bg-20: #FFFFFF;
  --color-seabg: #F2F2F2;
  --color-text: #999;
  --color-text-3: #333;
  --color-search-t: #242424;
  --color-text-39: #999;
  --color-text-6: #666;
  --color-Sel: #242424;
  --color-shadow: #e9e9e9;
  --color-bg-3b: rgb(246, 248, 248);
  --color-bg-F: #ffffff;
  --color-bg-12: rgb(246, 248, 248);
  --color-foot-shadow: 0 -4px 6px -2px rgba(0, 0, 0, 0.1);
  --border-b: #f1f1f1;
  --border-b2: #f6f8f8;
  --color-text-btn: #e7e7e7;
  --color-b-sel: #ededed;
  --btn-b: #e7e7e7;
  --btn-b-lj: #6e6e6e;
  --btn-color: #fff;
  --color-text-33: #333;
  --btn-gz-b: #EBEBEB;
  --color-text-con: #666;
  --border-ls: #fff;
  --color-btn-b: #EBEBEB;
  --ba-sel: rgb(235, 235, 235);
  --ba-sel-t: #333;
  --text-color: #333;
  --ba-color-sel: #EBEBEB;
  --text-color-sel: #EBEBEB;
  --btn-hover-b: rgb(192, 192, 192);





}


html.dark {
  --color-bg: #121212;
  --color-bg-F6: #121212;
  --color-bg-20: #202020;
  --color-seabg: #202020;
  --color-text: #999;
  --color-text-3: #999;
  --color-search-t: #fff;
  --color-text-39: #666;
  --color-text-6: #666;
  --color-Sel: #fff;
  --color-shadow: #353535;
  --color-bg-3b: #3b3b3b;
  --color-bg-F: #3b3b3b;
  --color-bg-12: #121212;
  --color-foot-shadow: 0 -4px 6px -2px rgba(214, 214, 214, 0.1);
  --border-b: #272727;
  --border-b2: #2e2e2e;
  --color-text-btn: #e7e7e7;
  --color-b-sel: #737373;
  --btn-b: #373737;
  --btn-b-lj: #373737;
  --btn-color: #999;
  --color-text-33: #333;
  --btn-gz-b: red;
  --color-text-con: #999;
  --border-ls: #424242;
  --color-btn-b: #373737;
  --ba-sel: #373737;
  --ba-sel-t: #999;
  --text-color: #FFF;
  --ba-color-sel: #373737;

  --btn-hover-b: rgb(102, 102, 102);

}




:root {
  /* pc字体 */
  --text-22: 1.14vw;
  --text-18: 0.93vw;
  --text-16: 0.83vw;
  --text-14: 0.72vw;
  --text-12: 0.62vw;
  --text-30: 1.56vw;
  --text-26: 1.35vw;

  /* 字体颜色 */
  --text-fff: #ffffff;
  --text-10: #101010;
  --btn-b-sel: rgb(235, 235, 235);
  --btn-text-sel: #333;

  /* 手机字体 */
  --text-16px: 16px;



}



.show-pc {
  display: block !important;
}

.show-wap {
  display: none !important;
}

@media (max-width: 800px) {
  .show-pc {
    display: none !important;
  }

  .show-wap {
    display: block !important;


  }


}



html {
  scrollbar-width: none;
  -ms-overflow-style: none;

}

::-webkit-scrollbar {
  display: none;
}
</style>




















<!-- <template>
  <a-extract-style>
    <a-config-provider :theme="{
      token: {
        colorPrimary: '#FFCFD9',
        fontFamily: 'PingFang SC, Helvetica Neue, Arial, sans-serif',
      },
      // algorithm: theme.darkAlgorithm
    }">
      <NuxtLayout>
        <NuxtPage></NuxtPage>
      </NuxtLayout>
    </a-config-provider>
  </a-extract-style>
</template>

<script setup>
import * as AntIconsVue from "@ant-design/icons-vue";
import { theme,  } from 'ant-design-vue'
// import 'ant-design-vue/dist/antd.css';
// 注册图标
const nuxtApp = useNuxtApp();
for (const [key, component] of Object.entries(AntIconsVue)) {
  nuxtApp.vueApp.component(key, component);
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style> -->
